<template>
  <div class="contact-ways common-page">
    <van-cell-group>
      <van-cell
        title="微信"
        :value="contentInfo.wechat"
      />
      <van-cell
        title="QQ"
        :value="contentInfo.qq"
      />
      <van-cell title="用户ID">
        <template>
          <span>{{userInfo.userId4Show.substring(0,8)+'...'}}</span>
          <van-button
            plain
            hairline
            type="primary"
            round
            class="tag-read"
            @click="copyText(userInfo.userId4Show,$event)"
          >复制</van-button>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { Cell, CellGroup, Button } from "vant";
import Clipboard from "clipboard";
import apBox from "@/common/api/apBox";
import Share from "./mixin/share";
export default {
  name: "ContactWays",
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
  },
  mixins: [Share],
  computed: {
    ...mapGetters(["userInfo"]),
  },
  data() {
    return {
      contentInfo: {},
    };
  },
  created() {
    this.getContent();
    this.setShare();
  },
  mounted() {},
  methods: {
    getContent() {
      this.$toast.loading();
      apBox.getBoxRuleContact().then((data) => {
        this.$toast.clear();
        let content = {};
        if (data.data.content) {
          content = JSON.parse(data.data.content);
        }
        this.contentInfo = content;
      });
    },
    // 复制订单号
    copyText(text, e) {
      const clipboard = new Clipboard(e.target, {
        text: () => text,
      });
      clipboard.on("success", () => {
        this.copySuccess();
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", () => {
        // 不支持复制
        this.copyFail();
        // 释放内存
        clipboard.destroy();
      });
      // 解决第一次点击不生效的问题，如果没有，第一次点击会不生效
      clipboard.onClick(e);
    },
    copySuccess() {
      this.$toast.success("复制文本成功");
    },
    copyFail() {
      this.$toast.warning("该浏览器不支持自动复制");
    },
  },
};
</script>

<style lang="less" scoped>
@import "../common/css/common.less";
.contact-ways {
  padding-left: 0;
  padding-right: 0;
}
.van-cell {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  .van-cell__title {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
  }
  .van-cell__value{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }
  .van-button--plain.van-button--primary {
    height: 40px;
    padding: 0 21px;
    background: #fafafa;
    border: 1px solid #888888;
    font-size: 20px;
    color: #969799;
    margin-left: 10px;
  }
  .van-button::before,.van-button--hairline.van-button--round::after{
    display: none;
  }
}
</style>
